import { defineComponent } from 'vue'
import './index.scss'
import { NavBar, showToast } from 'vant'
import router from '@/router'

/**
 * 需求：
 * 1. 实现点击返回按钮，放回上一个页面（历史记录）
 * 2. 暴露一个props属性，title 设置标题
 * 3. 暴露一个props属性，rightText 设置标题
 * 4. 点击右侧的文字按钮，要做的事情是无法确定的。通过事件来通知父组件
 */

export default defineComponent({
  props: {
    title: String,
    rightText: String
  },
  emits: ['clickRight'],
  setup(props, { emit }) {
    const onClickLeft = () => {
      router.back()
    }
    const onClickRight = () => {
      showToast('clickRight show Toast')
      emit('clickRight')
    }
    return () => (
      <>
        <NavBar
          left-arrow
          fixed
          title={props.title}
          rightText={props.rightText}
          onClickLeft={() => onClickLeft()}
          onClickRight={() => onClickRight()}
        ></NavBar>
      </>
    )
  }
})
